<template>
  <div>
    <!-- 1.登录头部导航提示 -->
    <van-nav-bar title="重置密码">
      <template #left>
        <van-icon name="arrow-left" size="18" @click="$router.back()" />
      </template>
    </van-nav-bar>

    <!-- 2.表单验证 重置密码 -->

    <van-form @submit="onSubmit">
      <van-field
        v-model.number="resetInfo.mobile"
        name="mobile"
        label="手机号"
        placeholder="手机号"
        :rules="resetRules.mobile"
      />
      <van-field
        v-model.number="resetInfo.checkCode"
        type="password"
        name="code"
        label="验证码"
        placeholder="验证码"
        :rules="resetRules.resetCode"
      >
        <template slot="button" v-if="isCountDown">
          <van-button type="primary" size="small" native-type="button">
            <van-count-down :time="10 * 1000" format="ss s" @finish="finish" />
          </van-button>
        </template>
        <template slot="button" v-else>
          <van-button
            type="primary"
            size="small"
            @click="isCountDown = true"
            native-type="button"
            >发送验证码</van-button
          >
        </template>
      </van-field>

      <van-field
        v-model="resetInfo.password"
        type="password"
        name="password"
        label="新密码"
        placeholder="新密码"
        :rules="resetRules.password"
      />
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
        :disabled="isCountDown"
          >立即修改</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { resetPwd } from "@/api/login.js";
export default {
  name:"ResetIndex",
  data() {
    return {
      isCountDown: false,// 是否倒计时;
      resetInfo: {
        mobile: null,
        checkCode: 888888,
        password: null,
      },
      resetRules: {
        mobile: [
          { required: true, message: "请填写手机号" },
          { pattern: /^1[3-9]\d{9}$/, message: "手机号格式不对" },
        ],
        checkCode: [
          { required: true, message: "请填写密码" },
          { pattern: /^\d{9}$/, message: "验证码格式不正确" },
        ],
        password: [
          { required: true, message: "请填写密码" },
          { pattern: /^[a-z0-9A-Z]{6,12}$/, message: "密码格式不正确" },
        ],
      },
    };
  },
  methods: {
    async onSubmit(values) {
      try {
        const { data } = await resetPwd(values);
        if(data.errno==0){
          this.$toast.success("修改密码成功!");
          this.$router.push("/login")
        }else{
          this.$toast.fail("修改密码失败,请重试!")
        }
      } catch (err) {
        console.log(err);
        this.$toast.fail("发情请求失败!")
      }
    },
    finish() {
      this.isCountDown = false;
      console.log("倒计时结束");
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .van-nav-bar__content {
  background-color: rgb(225, 28, 52);
}
::v-deep .van-icon-arrow-left,
::v-deep .van-nav-bar__title {
  color: #fff;
}
// 225, 28, 52
</style>
